/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
        /**/
        width: 80px;
        -webkit-appearance: none;
        background-color: #d6d6ff;
        border-radius: 5px;
        cursor: pointer;
    }

        input[type='range']::-webkit-slider-runnable-track {
            height: 0.6em;
            -webkit-appearance: none;
            /*margin-top: -1px;*/
        }

        input[type='range']::-webkit-slider-thumb {
            transform: translateY(-.25em);
            width: .5em;
            -webkit-appearance: none;
            height: 1em;
            /*cursor: ew-resize;*/
            cursor: pointer;
            background: var(--color-primary);
            box-shadow: 2em 0 0 2em rgb(239 93 168 / 80%);
        }


        input[type='range'].large::-webkit-slider-runnable-track {
            height:.8em;
        }

        input[type='range'].large::-webkit-slider-thumb {
            height: 1.5rem;
            width: 1.5rem !important;
            transform: translateY(-.35rem);
        }



/*
            input[type='range'][value='0']:not(:hover) {
                background-color: #d6d6ff79;
            }

            input[type='range'][value='0']:not(:hover)::-webkit-slider-thumb {
                width: 0em;
            }
*/

            /*       input[type='range']:after{
                content:'';
                width:5em;
                height:1em;
                background:red;
                display:inline-block;
            }
*/
            input[type='range'].rect {
                overflow: hidden;
            }

        input[type='range']:not(.rect)::-webkit-slider-thumb {
            border-radius: 100%;
            box-shadow: none;
            width: 1em;
        }

}
/** FF*/
input[type="range"]::-moz-range-progress {
    background-color: #43e5f7;
}

input[type="range"]::-moz-range-track {
    background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
    background-color: #43e5f7;
}

input[type="range"]::-ms-fill-upper {
    background-color: #9a905d;
}



.range-bars {
    display: flex;
    align-items: center;
}

    .range-bars > * {
        width: 0.9em;
        height: 1em;
        font-size: 10px;
        background:  var(--color-border);
        border-radius: 2px;
    }

        .range-bars > * + * {
            margin-right: 2px;
        }

        .range-bars > *.on {
            background: var(--color-primary);
        }